<template>
    <div :id="treeId"></div>
    <!--<input type="text" :id="pickerId" name="daterange" class="form-control date-picker" :disabled="disable" placeholder="{{placeholder}}" v-model="pickerValue" />-->
</template>
<style>

</style>
<script>

    require('../../resources/css/tree/style.min.css');

//    import jstree from '../vendor/jquery/jstree/jstree.min'

    import dbFetch from '../services/dbFetch'

    export default {
        replace: true,
        props: {
            treeValue:{
                twoWay: true,
                required: true
            },
            treeSrc: {
                type: String,
                required: true,
                default: function _default() {
                    return '';
                }
            },
            treePlugins: {
                type: Array,
                required: false,
                default: function _default() {
                    return [];
                }
            },
            treeMultiple: {
                type: Boolean,
                default: function _default() {
                    return false;
                }
            },
            treeTypes: {
                required: false,
                default: function _default() {
                    return {};
                }
            },
            treeStripes: {
                type: Boolean,
                default: function _default() {
                    return false;
                }
            }
        },
        data (){
            return {
                treeId: this.uuid4(),
                treedata:[]
            }
        },
        created () {

        },
        watch:{
//            "pickerValue" (newVal, oldVal) {
//                console.log(newVal, oldVal)
//            }
        },
        ready (){

            let self = this;

            dbFetch.fetchGet(this.treeSrc, {},function (res) {
                self.treedata = res;

                $('#'+self.treeId).jstree({
                    core : {
                        "themes" : {
                            "responsive": false,
                            "stripes":self.treeStripes
                        },
                        multiple : self.treeMultiple,
                        animation: true,
                        error : function(error) {
                            console.error('treeCtrl: error from js tree');
                        },
                        check_callback : true,
                        worker : true,
                        data:self.treedata
                    },
                    types : self.treeTypes,
                    version : 1,
                    plugins : self.treePlugins
                });

                $('#'+self.treeId).on("changed.jstree", self.updateValue);

            });

        },
        methods:{
            uuid4 () {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
                    return v.toString(16)
                })
            },
            updateValue (e, data) {
                console.log(data.node);
            },
            getSelectIds () {
                return $('#'+this.treeId).jstree().get_checked()
            },
            getSelectObj () {
                return $('#'+this.treeId).jstree().get_checked(true)
            }
        }
    }
</script>
